<template>
  <div class="data-center-main" ref="dataCenter">
    <div class="mid">
      <div class="midInfo" style="padding-right: 20px">
        <div class="titlefont">客流统计</div>
        <div style="display: flex; justify-content: space-between">
          <div class="flowinfo">
            <div class="midTitle">昨日客流（次）</div>
            <div class="midValue">300</div>
            <div class="midfont">
              上年客流同比增长：<img
                src="../../../../assets/images/shangzhang .png"
                style="width: 12px"
                alt=""
              /><span style="color: #ff2600">30%</span>
            </div>
            <div class="midfont">
              上年客流环比增长：<img
                src="../../../../assets/images/xiajiang .png"
                style="width: 12px"
                alt=""
              /><span style="color: #52b852">10%</span>
            </div>
            <div class="midfont">今年当前客流：12</div>
          </div>
          <div class="flowinfo">
            <div class="midTitle">上月客流（次）</div>
            <div class="midValue">300</div>
            <div class="midfont">
              上月客流同比增长：<img
                src="../../../../assets/images/shangzhang .png"
                style="width: 12px"
                alt=""
              /><span style="color: #ff2600">30%</span>
            </div>
            <div class="midfont">
              上月客流环比增长：<img
                src="../../../../assets/images/xiajiang .png"
                style="width: 12px"
                alt=""
              /><span style="color: #52b852">-10%</span>
            </div>
            <div class="midfont">本月当前客流：12</div>
          </div>
          <div class="flowinfo">
            <div class="midTitle">去年客流（次）</div>
            <div class="midValue">300</div>
            <div class="midfont">
              去年客流同比增长：<img
                src="../../../../assets/images/shangzhang .png"
                style="width: 12px"
                alt=""
              /><span style="color: #ff2600">30%</span>
            </div>
            <!-- <div class="midfont">
              今年当前客流环比增长：<img
                src="../../../../assets/images/xiajiang .png"
                style="width: 12px"
                alt=""
              /><span style="color: #52b852">-10%</span>
            </div> -->
            <div class="midfont">今年当前客流：12</div>
          </div>
        </div>
      </div>
      <div class="midInfo" style="border-right: 0px; padding-left: 20px">
        <div class="titlefont">开门次数统计</div>
        <div style="display: flex; justify-content: space-between">
          <div class="flowinfo">
            <div class="midTitle">昨日开门次数（次）</div>
            <div class="midValue">300</div>
            <div class="midfont">
              昨日开门次数同比增长：<img
                src="../../../../assets/images/shangzhang .png"
                style="width: 12px"
                alt=""
              /><span style="color: #ff2600">30%</span>
            </div>
            <div class="midfont">
              昨日开门次数环比增长：<img
                src="../../../../assets/images/xiajiang .png"
                style="width: 12px"
                alt=""
              /><span style="color: #52b852">10%</span>
            </div>
            <div class="midfont">今日当前开门次数：12</div>
          </div>
          <div class="flowinfo">
            <div class="midTitle">上月开门次数（次）</div>
            <div class="midValue">300</div>
            <div class="midfont">
              上月开门次数同比增长：<img
                src="../../../../assets/images/shangzhang .png"
                style="width: 12px"
                alt=""
              /><span style="color: #ff2600">30%</span>
            </div>
            <div class="midfont">
              上月开门次数环比增长：<img
                src="../../../../assets/images/xiajiang .png"
                style="width: 12px"
                alt=""
              /><span style="color: #52b852">-10%</span>
            </div>
            <div class="midfont">本月当前开门次数：12</div>
          </div>
          <div class="flowinfo">
            <div class="midTitle">去年开门次数（次）</div>
            <div class="midValue">300</div>
            <div class="midfont">
              去年开门次数增长：<img
                src="../../../../assets/images/shangzhang .png"
                style="width: 12px"
                alt=""
              /><span style="color: #ff2600">30%</span>
            </div>
            <!-- <div class="midfont">
              上年客流环比增长：<img
                src="../../../../assets/images/xiajiang .png"
                style="width: 12px"
                alt=""
              /><span style="color: #52b852">-10%</span>
            </div> -->
            <div class="midfont">今年当前客流：12</div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="bottom1">
        <div class="tend">
          <div style="position: absolute; top: 20px; left: 20px">
            <div class="titlefont">客流趋势</div>
            <el-button-group style="margin-right: 20px">
              <el-button type="mini">近七日</el-button>
              <el-button type="mini">近七周</el-button>
              <el-button type="mini">近七月</el-button>
            </el-button-group>
            <el-select
              style="width: 100px"
              v-model="province1"
              size="mini"
              placeholder="请选择省份"
            >
              <el-option
                v-for="item in provinceList"
                :key="item.name"
                :label="item.name"
                :value="item.name"
              >
              </el-option>
            </el-select>
          </div>

          <div style="width: 100%; height: 100%" id="chart1"></div>
        </div>
        <div class="distribution">
          <div style="position: absolute; top: 20px; left: 20px; z-index: 100">
            <div class="titlefont">地域客流分布</div>
            <el-date-picker
              style="margin-right: 10px"
              size="mini"
              v-model="timeP"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
            <el-select
              style="width: 100px"
              v-model="province1"
              size="mini"
              placeholder="请选择省份"
            >
              <el-option
                v-for="item in provinceList"
                :key="item.name"
                :label="item.name"
                :value="item.name"
              >
              </el-option>
            </el-select>
          </div>

          <div style="width: 100%; height: 100%" id="chart2"></div>
        </div>
      </div>

      <div class="bottom1">
        <div class="tend">
          <div style="position: absolute; top: 20px; left: 20px; z-index: 100">
            <div class="titlefont">客流时间点趋势</div>
            <el-button-group style="margin-right: 20px">
              <el-button type="mini">近七日</el-button>
              <el-button type="mini">近七周</el-button>
              <el-button type="mini">近七月</el-button>
            </el-button-group>
            <el-select
              style="width: 100px"
              v-model="province1"
              size="mini"
              placeholder="请选择省份"
            >
              <el-option
                v-for="item in provinceList"
                :key="item.name"
                :label="item.name"
                :value="item.name"
              >
              </el-option>
            </el-select>
          </div>

          <div style="width: 100%; height: 100%" id="chart3"></div>
        </div>
        <div class="distribution">
          <div style="position: absolute; top: 20px; left: 20px; z-index: 100">
            <div class="titlefont">渠道客流分布</div>
            <el-date-picker
              style="margin-right: 10px"
              size="mini"
              v-model="timeP"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
            <el-select
              style="width: 100px"
              v-model="province1"
              size="mini"
              placeholder="请选择省份"
            >
              <el-option
                v-for="item in provinceList"
                :key="item.name"
                :label="item.name"
                :value="item.name"
              >
              </el-option>
            </el-select>
          </div>

          <div style="width: 100%; height: 100%" id="chart4"></div>
        </div>
      </div>

      <div class="bottom2">
        <div id="chart3">
          <div class="titlefont">客流量TOP10</div>
          <dv-scroll-board
            :config="flowScroll"
            style="height: 95%; color: #969696; width: 100%"
          />
        </div>
        <div id="chart4">
          <div class="titlefont">客流异常</div>
          <dv-scroll-board
            :config="errorScroll"
            style="height: 95%; color: #969696; width: 100%"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { deviceBoot, getStatistics, deviceBatchReboot, devicesBatchs, getRebootResult } from '@/api/device/deviceModel'
// import {
//     getDeviceInfo,
//     getDeviceList,
//     statusListPage,
// } from '@/api/device/masterDevice'

// import { userListPage } from '@/api/user/index'
// import { listCustomer } from '@/api/customer/customer'
// import {
//     getOpenCountBaseData,
//     getPeopleCountByDay,
//     getOpenCountByDate,
//     getOpenCountRankByDay
// }
//     from '@/api/dataCenter/index'
// deviced /container/data/view 接口每有用到设备参数id
// import {
//     containerTypeByUserId
// } from '@/api/container/index'
// import initCust from '@/plugins/mixin'
export default {
  components: {},
  data() {
    return {
      defaultData: {
        number: 20,
      },
      initCustomer: [],
      queryParams: {
        timeValue: "近七日",
        userId: "", // 用户id
        containerType: "", // 冰柜类型
        deviceId: "", // 设备id   名称
      },
      mainData: {},
      containerList: [], // 冰柜搜索列表
      deviceList: [], // 设备搜索列表
      curentDeviceItem: "-",
      showData: {}, // 第二行几个框，昨日列表数据
      containerStl: {},
      baseData: {}, //柜子基础数据
      onlineCount: "",
      totalCount: "",
      period: "7",
      timeP: "",
      clientTypeList: [
        {
          value: 1,
          label: "客户",
        },
        {
          value: 2,
          label: "供应商",
        },
      ],
      clientType: "",
      TimePeriod: [
        {
          value: "1",
          label: "按日查询",
        },
        {
          value: "7",
          label: "按周查询",
        },
        {
          value: "30",
          label: "按月查询",
        },
      ],
      timeValue: "按周查询", //动销事件周期
      passengerperiod: "按周查询", //客流趋势周期

      //客流趋势
      flowerTender: {
        color: ["#165DFF", "#14C9C9"],
        // title: {
        //   text: "客流趋势（人次）",
        //   textStyle: {
        //     fontFamily: "HarmonyOS_Sans_SC_Medium",
        //     fontSize: 18,
        //     color: "#333333",
        //     left: "0%",
        //     fontWeight: "normal",
        //   },
        // },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },

        // label: {
        //   show: true,
        //   position: 'top'
        // },
        legend: { top: "15%", right: "3%", data: ["开门次数", "PIR客流量"] },
        grid: {
          left: "5%",
          right: "3%",
          bottom: "8%",
          top: "35%",
          // containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: ["1.02", "1.03", "1.04", "1.05", "1.06", "1.07", "1.08"],
            axisPointer: {
              type: "shadow",
            },
            axisLine: {
              lineStyle: {
                color: "#8C8C8C", //坐标轴的颜色
              },
            },
            axisLabel: {
              //x轴文字的配置
              show: true,
              textStyle: {
                color: "#8C8C8C",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLine: {
              show: false,
              lineStyle: {
                color: "#8C8C8C", //坐标轴的颜色
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                show: false,
                type: "dashed",
                color: "#DFDFDF",
              },
            },
            axisLabel: {
              //x轴文字的配置
              show: true,
              textStyle: {
                color: "#8C8C8C",
              },
            },
            // axisLabel: {
            //   formatter: '{value} ml'
            // }
          },
        ],
        series: [
          {
            name: "开门次数",
            data: [500, 900, 600, 800, 700, 110, 730],
            type: "line",
            barWidth: 20,
            areaStyle: {
              opacity: 0.8,
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(22, 93, 255, 0.2)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(22, 93, 255, 0)", // 100% 处的颜色
                  },
                ],
              },
            },
            smooth: true,
            showSymbol: false,
          },
          {
            name: "PIR客流量",
            data: [700, 600, 500, 900, 400, 600, 840],
            type: "line",
            barWidth: 20,
            areaStyle: {
              opacity: 0.8,
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(20, 201, 201, 0.2)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(20, 201, 201, 0)", // 100% 处的颜色
                  },
                ],
              },
            },
            smooth: true,
            showSymbol: false,
          },
        ],
      },
      //客流分布
      flowDistribution: {
        color: ["#165DFF", "#14C9C9"],
        // title: {
        //   text: "客流分布（人次）",
        //   textStyle: {
        //     fontFamily: "HarmonyOS_Sans_SC_Medium",
        //     fontSize: 18,
        //     color: "#333333",
        //     left: "0%",
        //     fontWeight: "normal",
        //   },
        // },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        // label: {
        //   show: true,
        //   position: 'top'
        // },
        legend: { top: "15%", right: "3%", data: ["客流总数", "开门总数"] },
        grid: {
          left: "5%",
          right: "3%",
          bottom: "9%",
          top: "40%",
          // containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: ["浙江", "江苏", "安徽", "四川", "北京", "河南", "重庆"],
            axisPointer: {
              type: "shadow",
            },
            axisLine: {
              lineStyle: {
                color: "#8C8C8C", //坐标轴的颜色
              },
            },
            axisLabel: {
              //x轴文字的配置
              show: true,
              textStyle: {
                color: "#8C8C8C",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLine: {
              show: false,
              lineStyle: {
                color: "#8C8C8C", //坐标轴的颜色
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              //x轴文字的配置
              show: true,
              textStyle: {
                color: "#8C8C8C",
              },
            },
            splitLine: {
              lineStyle: {
                show: false,
                type: "dashed",
                color: "#dfdfdf",
              },
            },
            // axisLabel: {
            //   formatter: '{value} ml'
            // }
          },
        ],
        series: [
          {
            name: "客流总数",
            data: [500, 900, 600, 800, 700, 110, 730],
            type: "bar",
            barWidth: 16,
            showSymbol: false,
            barGap: "0%",
          },
          {
            name: "开门总数",
            data: [300, 600, 900, 300, 500, 500, 200],
            type: "bar",
            barWidth: 16,
            showSymbol: false,
            barGap: "0%",
          },
        ],
      },
      tableData: [
        {
          rank: "1",
          deviceCode: "123456",
          address: "上海市普陀区金沙江路 1518 弄",
          frequency: "16",
          agency: "张三",
        },
        {
          rank: "2",
          deviceCode: "123456",
          address: "上海市普陀区金沙江路 1518 弄",
          frequency: "16",
          agency: "张三",
        },
        {
          rank: "3",
          deviceCode: "123456",
          address: "上海市普陀区金沙江路 1518 弄",
          frequency: "16",
          agency: "张三",
        },
        {
          rank: "4",
          deviceCode: "123456",
          address: "上海市普陀区金沙江路 1518 弄",
          frequency: "16",
          agency: "张三",
        },
        {
          rank: "5",
          deviceCode: "123456",
          address: "上海市普陀区金沙江路 1518 弄",
          frequency: "16",
          agency: "张三",
        },
        {
          rank: "6",
          deviceCode: "123456",
          address: "上海市普陀区金沙江路 1518 弄",
          frequency: "16",
          agency: "张三",
        },
        {
          rank: "7",
          deviceCode: "123456",
          address: "上海市普陀区金沙江路 1518 弄",
          frequency: "16",
          agency: "张三",
        },
      ],
      provinceList: [
        { adcode: "110000", name: "北京市" },
        { adcode: "120000", name: "天津市" },
        { adcode: "130000", name: "河北省" },
        { adcode: "140000", name: "山西省" },
        { adcode: "150000", name: "内蒙古自治区" },

        { adcode: "210000", name: "辽宁省" },
        { adcode: "220000", name: "吉林省" },
        { adcode: "230000", name: "黑龙江省" },

        { adcode: "310000", name: "上海市" },
        { adcode: "320000", name: "江苏省" },
        { adcode: "330000", name: "浙江省" },
        { adcode: "340000", name: "安徽省" },
        { adcode: "350000", name: "福建省" },
        { adcode: "360000", name: "江西省" },
        { adcode: "370000", name: "山东省" },

        { adcode: "410000", name: "河南省" },
        { adcode: "420000", name: "湖北省" },
        { adcode: "430000", name: "湖南省" },
        { adcode: "440000", name: "广东省" },
        { adcode: "450000", name: "广西壮族自治区" },
        { adcode: "460000", name: "海南省" },

        { adcode: "500000", name: "重庆市" },
        { adcode: "510000", name: "四川省" },
        { adcode: "520000", name: "贵州省" },
        { adcode: "530000", name: "云南省" },
        { adcode: "540000", name: "西藏自治区" },

        { adcode: "610000", name: "陕西省" },
        { adcode: "620000", name: "甘肃省" },
        { adcode: "630000", name: "青海省" },
        { adcode: "640000", name: "宁夏回族自治区" },
        { adcode: "650000", name: "新疆维吾尔自治区" },

        { adcode: "710000", name: "台湾省" },
        { adcode: "810000", name: "香港特别行政区" },
        { adcode: "820000", name: "澳门特别行政区" },
      ],
      province1: "",
      pickerOptions: {
        shortcuts: [
          {
            text: "本月",
            onClick(picker) {
              picker.$emit("pick", [new Date(), new Date()]);
            },
          },
          {
            text: "今年至今",
            onClick(picker) {
              const end = new Date();
              const start = new Date(new Date().getFullYear(), 0);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近六个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 6);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      warning: [
        {
          deviceCode: "123456",
          address: "上海市普陀区金沙江路 1518 弄",
          frequency: "16",
          warningType: "客流异常",
        },
        {
          deviceCode: "123456",
          address: "上海市普陀区金沙江路 1518 弄",
          frequency: "16",
          warningType: "客流异常",
        },
        {
          deviceCode: "123456",
          address: "上海市普陀区金沙江路 1518 弄",
          frequency: "16",
          warningType: "客流异常",
        },
        {
          deviceCode: "123456",
          address: "上海市普陀区金沙江路 1518 弄",
          frequency: "16",
          warningType: "客流异常",
        },
        {
          deviceCode: "123456",
          address: "上海市普陀区金沙江路 1518 弄",
          frequency: "16",
          warningType: "客流异常",
        },
        {
          deviceCode: "123456",
          address: "上海市普陀区金沙江路 1518 弄",
          frequency: "16",
          warningType: "客流异常",
        },
        {
          deviceCode: "123456",
          address: "上海市普陀区金沙江路 1518 弄",
          frequency: "16",
          warningType: "客流异常",
        },
      ],
      timeRanges: [
        {
          value: "近七日",
          label: "近七日",
        },
        {
          value: "近七周",
          label: "近七周",
        },
        {
          value: "近七月",
          label: "近七月",
        },
      ],
      //客流top10
      flowScroll: {
        header: [
          '<span style="color:#565656;">排名</span>',
          '<span style="color:#565656;">设备编号</span>',
          '<span style="color:#565656;">所属渠道</span>',
          '<span style="color:#565656;">设备位置</span>',
          '<span style="color:#565656;">客流次数</span>',
        ],
        headerBGC: "#F4F7FA",
        oddRowBGC: "#F4F7FA",
        evenRowBGC: "#ffffff",
        rowNum: 10,
        align: ["center", "center", "center", "center"],
        // columnWidth: [100,200, 100,100],
        data: [
          ["1", "123456789", "123456", "浙江省杭州市", "13"],
          ["2", "123456789", "非法位移", "浙江省杭州市", "13"],
          ["3", "123456789", "非法位移", "浙江省杭州市", "13"],
          ["4", "123456789", "非法位移", "浙江省杭州市", "13"],
          ["5", "123456789", "非法位移", "浙江省杭州市", "13"],
          ["6", "123456789", "非法位移", "浙江省杭州市", "13"],
          ["7", "123456789", "非法位移", "浙江省杭州市", "13"],
          ["8", "123456789", "非法位移", "浙江省杭州市", "13"],
          ["9", "123456789", "非法位移", "浙江省杭州市", "13"],
          ["10", "123456789", "非法位移", "浙江省杭州市", "13"],
          ["11", "123456789", "非法位移", "浙江省杭州市", "13"],
          ["12", "123456789", "非法位移", "浙江省杭州市", "13"],
          ["13", "123456789", "非法位移", "浙江省杭州市", "13"],
        ],
      },
      //客流异常
      errorScroll: {
        header: [
          '<span style="color:#565656;">设备编号</span>',
          '<span style="color:#565656;">设备位置</span>',
          '<span style="color:#565656;">客流次数</span>',
          '<span style="color:#565656;">异常说明</span>',
        ],
        headerBGC: "#F4F7FA",
        oddRowBGC: "#F4F7FA",
        evenRowBGC: "#ffffff",
        rowNum: 10,
        align: ["center", "center", "center", "center"],
        // columnWidth: [100,200, 100,100],
        data: [
          ["123456789", "浙江省杭州市", "13", "客流异常"],
          ["123456789", "浙江省杭州市", "13", "非法位移"],
          ["123456789", "浙江省杭州市", "13", "非法位移"],
          ["123456789", "浙江省杭州市", "13", "非法位移"],
          ["123456789", "浙江省杭州市", "13", "非法位移"],
          ["123456789", "浙江省杭州市", "13", "非法位移"],
          ["123456789", "浙江省杭州市", "13", "非法位移"],
          ["123456789", "浙江省杭州市", "13", "非法位移"],
          ["123456789", "浙江省杭州市", "13", "非法位移"],
          ["123456789", "浙江省杭州市", "13", "非法位移"],
          ["123456789", "浙江省杭州市", "13", "非法位移"],
          ["123456789", "浙江省杭州市", "13", "非法位移"],
          ["123456789", "浙江省杭州市", "13", "非法位移"],
        ],
      },
    };
  },
  mounted() {
    this.init();
    this.initUser();
  },

  beforeDestroy() {},
  methods: {
    init() {
      // const params = {
      //     userId: this.$store.state.user.id
      // }
      // getStatistics(params)
      //     .then((res) => {
      //         this.onlineCount = res.data.onlineCount
      //     })
      // statusListPage(params)
      //     .then((res) => {
      //         this.totalCount = res.data.totalCount
      //     })
      console.log("开始绘制表格");
      var chartDom = document.getElementById("chart1");
      var flowerTenderChart = this.$echarts.init(chartDom);
      flowerTenderChart.setOption(this.flowerTender);
      var chartDom = document.getElementById("chart2");
      var flowDistributionChart = this.$echarts.init(chartDom);
      flowDistributionChart.setOption(this.flowDistribution);
      var chartDom = document.getElementById("chart3");
      var flowerTenderTimeChart = this.$echarts.init(chartDom);
      flowerTenderTimeChart.setOption(this.flowerTender);
      var chartDom = document.getElementById("chart4");
      var flowDistributionTimeChart = this.$echarts.init(chartDom);
      flowDistributionTimeChart.setOption(this.flowDistribution);
      window.onresize = () => {
        flowerTenderChart.resize();
        flowDistributionChart.resize();
        flowerTenderTimeChart.resize();
        flowDistributionTimeChart.resize();
      };
    },
    getRankDate() {
      const params = {
        userId: this.queryParams.userId,
        day: 7,
      };
      getOpenCountRankByDay(params)
        .then((res) => {
          if (res.data) {
            console.log("排行榜top5：", res.data);
            // this.baseData=res.data
          }
        })
        .catch((err) => {
          console.log("排行榜top5数据获取失败！", err);
        });
    },
    getPeopleCountByDayInfo(value) {
      const params = {
        deviceId: value,
        day: 7,
      };
      getPeopleCountByDay(params)
        .then((res) => {
          if (res.data) {
            console.log("当日开门趋势为：", res.data);
            // this.baseData=res.data
          }
        })
        .catch((err) => {
          console.log("当日开门趋势数据获取失败！", err);
        });
    },
    getOpenCountByDate(value) {
      const params = {
        deviceId: value,
        date: "2023-04-24",
      };
      getOpenCountByDate(params)
        .then((res) => {
          if (res.data) {
            console.log("指定日期的客流趋势为：", res.data);
            // this.baseData=res.data
          }
        })
        .catch((err) => {
          console.log("指定日期的客流趋势数据获取失败！", err);
        });
    },
    getOpenCountBaseDataInfo(value) {
      console.log("当前选中的设备id为", value);
      const params = {
        deviceId: value,
      };
      getOpenCountBaseData(params)
        .then((res) => {
          if (res.data) {
            console.log("基础开门数据为：", res.data);
            this.baseData = res.data;
          }
        })
        .catch((err) => {
          console.log("获取设备基础客流数据失败！", err);
        });
    },
    handleResize() {
      const callback = (e) => {
        let target = this.$refs.heightFix;
        let wHeight = window.innerHeight;
        // console.log('## target ==> ', target, wHeight);
        // 264
        let ret = wHeight - 264;
        this.containerStl = { height: ret + "px" };
      };
      window.addEventListener("resize", callback);
      return () => {
        window.removeEventListener("resize", callback);
      };
    },
    custChange() {
      //   //选中一个用户后 先清空
      //   this.queryParams.containerType = "";
      //   this.queryParams.deviceId = "";
      //   this.deviceList = [];
      //   this.baseData = {};
      //   //根据用户id获取冰柜类型
      //   const params = {
      //     userId: this.queryParams.userId,
      //   };
      //   containerTypeByUserId(params).then((res) => {
      //     if (res.data) {
      //       console.log(
      //         "当前用户：",
      //         this.queryParams.userId,
      //         "的柜子类型有",
      //         res.data
      //       );
      //       //冰柜类型列表赋值
      //       this.containerList = res.data;
      //     }
      //   });
      //   const deviceParams = {
      //     pageIndex: 0,
      //     pageSize: 10000,
      //     userId: this.queryParams.userId,
      //   };
      //   getDeviceList(deviceParams).then((res) => {
      //     if (res.data) {
      //       console.log(res.data.data);
      //       this.deviceList = res.data.data;
      //     }
      //   });
    },
    handeDeviceChange(value) {
      console.log(value);
      console.log("## value  ==> ", value);
      const deviceId =
        this.deviceList.find((item) => {
          return item.id === value;
        }) || {};
      this.curentDeviceItem = value;
      this.getOpenCountBaseDataInfo(value);
      this.getPeopleCountByDayInfo(value);
      this.getOpenCountByDate(value);
      this.getRankDate();
      this.getData(value);
    },
    changeperiod(data) {
      this.period = data;
      //console.log('### period ==>', this.period);
      this.getData();
    },

    initUser() {
      if (this.$store.state.user.id === 1) {
        this.queryParams.userId = 1;
        listCustomer().then((res) => {
          //       参数中客户id(userId) ，当不传或者传0时，将返回当前登录用户的数据，且无需管理员权限
          // 当参数的userId有值时，将返回指定客户的数据，但是会校验管理员权限
          this.initCustomer = res.data.data || [];
          this.queryParams.userId = this.initCustomer[0]?.id;
          console.log("### listCustomer ==>", res);
          this.custChange();
        });
      } else {
        const id = this.$store.state.user.id;
        const nickname = this.$store.state.user.nickname;
        console.log("@@ id ", id, nickname);
        this.queryParams.userId = id;
        this.initCustomer = [{ id, nickname }];
        this.custChange();
      }
    },

    getData(obj) {
      const params = {
        deviceId: this.curentDeviceItem, // 设备 id
        day: this.period, // yyyy-mm-dd
        //...obj,
      };
      return getPeopleCountByDay(params)
        .then((res) => {
          console.log("@@## 过去七天客流量参数 ==> ", res);
          return res;
        })
        .then((res) => {
          // console.log('## watch id ==>', res)
          const list = res.data || [];
          const xData = list.map((item) => item.date);
          const yData = list.map((item) => item.peopleCount);
          console.log("## list ==>", xData, yData);
          // todos 这里需要setOption
          this.flowerTender.xAxis[0].data = xData;
          this.flowerTender.series[0].data = yData;
        })
        .catch((err) => {
          this.$message.warning(err.message);
        })
        .finally(() => {
          console.log("this.flowerTender", this.flowerTender);

          var chartDom = document.getElementById("chart1");
          var flowerTenderChart = this.$echarts.init(chartDom);
          flowerTenderChart.setOption(this.flowerTender);
          window.onresize = () => {
            flowerTenderChart.resize();
          };
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.data-center-main {
  background-color: #f3f3f3;
  width: 100%;
  height: calc(160vh - 100px);
  display: flex;
  flex-direction: column;
  padding: 1%;
}

.top {
  width: 100%;
  height: 10%;
  background-color: #fff;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 20px;
}

.mid {
  width: 100%;
  height: 230px;
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 1vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
}

.titlefont {
  font-family: "HarmonyOS_Sans_SC_Regular";
  font-weight: 500;
  font-size: 16px;
  color: #222;
  margin-bottom: 10px;
}

.midInfo {
  width: 50%;
  height: 100%;
  //padding-right: 20px;
  border-right: solid 1px #c0c4cc;
}
.flowinfo {
  width: 32%;
  background-color: #f6f9fc;
  border-radius: 4px;
  padding: 16px;
  height: 152px;
}
.flowinfo:hover {
  padding: 16px;
  width: 32%;
  background-color: #eaeffc;
  height: 152px;
  border: 1px solid #2b60dd;
}

.midTitle {
  border-left: solid 3px blue;
  padding: 0px 8px;
  font-family: "HarmonyOS_Sans_SC_Medium";
  font-size: 14px;
  font-weight: 400;
  color: #555;
}
.midValue {
  font-family: "HarmonyOS_Sans_SC_Bold";
  font-size: 24px;
  color: #202020;
  margin-top: 4px;
  margin-bottom: 4px;
}
.midfont {
  margin-bottom: 4px;
  font-size: 14px;
  color: #555;
  font-weight: 400px;
  font-family: "HarmonyOS_Sans_SC_Regular";
}

.bottom {
  width: 100%;
  //height: 67%;
  display: flex;
  flex-direction: column;
}

.bottom1 {
  width: 100%;
  height: 275px;
  margin-bottom: 1vw;
  display: flex;
  justify-content: space-between;
}

.bottom2 {
  width: 100%;
  margin-right: 1vw;
  height: 509px;
  display: flex;
  justify-content: space-between;
}

.tend {
  width: 49.5%;
  height: 100%;
  margin-right: 1vw;
  background-color: #fff;
  border-radius: 8px;
  position: relative;
  padding: 16px;
}

.distribution {
  width: 49.5%;
  height: 100%;
  background-color: #fff;
  border-radius: 8px;
  position: relative;
  padding: 16px;
}

#chart3 {
  width: 49.5%;
  height: 100%;
  margin-right: 1vw;
  background-color: #fff;
  border-radius: 8px;
  padding: 16px;
  position: relative;
}

#chart4 {
  width: 49.5%;
  height: 100%;
  background-color: #fff;
  border-radius: 8px;
  padding: 16px;
}

::v-deep .el-table .el-table__header-wrapper th,
.el-table .el-table__fixed-header-wrapper th {
  background-color: white;
}

.rank {
  width: 100%;
  height: 200px;
  overflow: auto;
  // margin-top: 20px;
}

.el-table--scrollable-y ::-webkit-scrollbar {
  //要设置滚动条样式需要先设置滚动条宽度
  /*滚动条整体样式*/
  width: 10px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 200px;
}

.el-table--scrollable-y ::-webkit-scrollbar-thumb {
  background: #d4d9ff; // 滑块颜色
  border-radius: 5px; // 滑块圆角
}

.el-table--scrollable-y ::-webkit-scrollbar-track {
  border-radius: 10px; // 轨道圆角
  background-color: #f4f4f4; // 轨道颜色
}
</style>
